<template>
    <div class="index">
        <div id="bot">
            <div id="left"></div>
            <div id="right"></div>
        </div>
        <div id="top"></div>
    </div>
</template>

<script>
import { mapState,mapActions } from 'vuex';
export default {
    name: 'WebIndex',
    computed: {
        ...mapState('EChdat',['dataTT','dataTS','dataCS'])
    },
    methods: {
        ...mapActions('EChdat',['topicTypeScale','teacherStation','sdeptClassStudents']),
        left(){
            let myChart = this.$echarts.init(document.getElementById("left"))
            myChart.setOption({
                title: {
                    text: "课题分类-课题数量",
                },
                tooltip: {},
                xAxis: {
                    data: this.dataTT.name
                },
                yAxis: {},
                series: [{
                    name: "课题数量",
                    type: "bar",
                    data: this.dataTT.total
                }]
            })
        },
        right(){
            let myChart = this.$echarts.init(document.getElementById("right"))
            myChart.setOption({
                title: {
                    text: "课题分类-老师数量",
                },
                tooltip: {},
                series: [{
                    type: 'pie',
                    data: this.dataTS
                }]
            })
        },
        top(){
            let myChart = this.$echarts.init(document.getElementById("top"))
            myChart.setOption({
                title: {
                    text: "课题分类-学生选题数量",
                },
                tooltip: {},
                xAxis: {
                    data: this.dataCS.sdept
                },
                yAxis: {},
                series: [{
                    name: "班级数量",
                    type: "bar",
                    data: this.dataCS.classTotal
                },{
                    name: "选题数量",
                    type: "bar",
                    data: this.dataCS.studentTotal
                }]
            })
        },
    },
    mounted() {
        this.topicTypeScale();
        this.teacherStation();
        this.sdeptClassStudents();
        setTimeout(() => {
            this.left();
            this.right();
            this.top();
        }, 1000);
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";
.index {
    .size()
}
#top,#bot {
    .size(100%,50%);
}
#bot {
    .df();
}
#left {
    .size(70%,100%);
}
#right {
    .size(30%,100%);
}
</style>